<!DOCTYPE html>
<html>
<head>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">

	<title>Form unit test</title>
	<style type="text/css">
		@import "../../themes/claro/document.css";
		@import "../css/dijitTests.css";
	</style>

	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: true"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dojo.date");
		dojo.require("dijit.dijit"); // optimize: load dijit layer
		dojo.require("dijit.form.Form");
		dojo.require("dijit.layout.LayoutContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.CheckBox");
		dojo.require("dijit.form.DateTextBox");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.form.MultiSelect");
		dojo.require("dijit.form.Textarea");
		dojo.require("dijit.form.SimpleTextarea");
		dojo.require("dijit.Editor");
		dojo.require("dijit.form.TextBox");
		
		function submittedValues(values){
			console.log('actual submitted values: ' + dojo.toJson(values));
			dijit.byId("textbox").set('value',dojo.fromJson(dojo.toJson(values)).plopcombo);
		}
	</script>

</head>
<body class="claro">

	<h1 class="testTitle">Form Widget Submit Test</h1>
	<p>Tests dojo.stopEvent() etc. calls inside dijit.form.Form onSubmit and onReset callbacks.</p>
	<form id="myForm1" data-dojo-type="dijit.form.Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
		onSubmit:function(e){ dojo.stopEvent(e); },
		onReset:function(e){ dojo.stopEvent(e); }'>
		<h3>This form shouldn't submit, nor reset</h3>
		<select id="combo1" data-dojo-type="dijit.form.ComboBox" data-dojo-props='name:"plopcombo" '>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>
		<button id="submit1" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
		<button id="reset1" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
	</form>

	<form id="myForm2" data-dojo-type="dijit.form.Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
		onSubmit:function(){ return false; },
		onReset:function(){ return false; }'>
		<h3>This form shouldn't submit, nor reset</h3>
		<select id="combo2" data-dojo-type="dijit.form.ComboBox" data-dojo-props='name:"plopcombo" '>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>
		<button id="submit2" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
		<button id="reset2" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
	</form>

	<form id="myForm3" data-dojo-type="dijit.form.Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
		onSubmit:function(){ return true; },
		onReset:function(){ return true; }'>
		<h3>This form <em>should</em> submit and reset</h3>
		<select id="combo3" data-dojo-type="dijit.form.ComboBox" data-dojo-props='name:"plopcombo" '>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>
		<button id="submit3" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
		<button id="reset3" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
	</form>

	<form id="myForm4" data-dojo-type="dijit.form.Form" data-dojo-props='encType:"multipart/form-data", action:"../formAction.html", method:"", target:"formSubmitIframe",
		onSubmit:function(){ void(0) },
		onReset:function(){ void(0) }'>
		<h3>This form <em>should</em> submit and reset</h3>
		<select id="combo4" data-dojo-type="dijit.form.ComboBox" data-dojo-props='name:"plopcombo" '>
			<option value="one">one</option>
			<option value="two">two</option>
			<option value="three">three</option>
		</select>
		<button id="submit4" data-dojo-type=dijit.form.Button data-dojo-props='type:"submit"'>Submit</button>
		<button id="reset4" data-dojo-type=dijit.form.Button data-dojo-props='type:"reset"'>Reset</button>
	</form>
	
	<h3>Submitted value:</h3>
	<input id="textbox" data-dojo-type="dijit.form.TextBox" data-dojo-props='type:"text" '/>
	
	<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>
